<template>
  <div class="weather-view" v-if="weatherData">
    <div class="weather-header-buttons">
      <el-button circle @click="router.back()">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <!-- Potentially add a slot for right-side buttons later if needed -->
    </div>
    <div class="weather-header">
      <div class="location">{{ weatherData.cityInfo?.city }}</div>
      <div class="temperature">{{ weatherData.data?.wendu }}°</div>
      <div class="temp-range">最高 {{ weatherData.data?.forecast?.[0]?.high?.replace('高温 ', '') }} 最低 {{ weatherData.data?.forecast?.[0]?.low?.replace('低温 ', '') }}</div>
      <div class="weather-type">{{ weatherData.data?.forecast?.[0]?.type }}</div>
    </div>
    <div class="aqi">
      <div class="aqi-value">{{ weatherData.data?.quality }}</div>
      <div class="aqi-text">当前AQI (CN) 为{{ weatherData.data?.aqi }}。</div>
    </div>
    <div class="forecast">
      <div class="forecast-item" v-for="(item, index) in weatherData.data?.forecast" :key="index">
        <div class="time">{{ index === 0 ? '现在' : item.date + '日' }}</div>
        <div class="icon">{{ item.type }}</div>
        <div class="probability">{{ item.fl }}</div>
        <div class="temp">{{ item.high?.replace('高温 ', '') }}°</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';

export default {
  name: 'WeatherView',
  components: {
    ArrowLeft,
  },
  setup() {
    const weatherData = ref(null);
    const router = useRouter();

    const fetchWeather = async () => {
      try {
        const response = await axios.get('http://localhost:8080/weather', {
          params: {
            cityCode: '101280101'
          }
        });
        console.log('Weather API response:', response.data);
        weatherData.value = response.data;
      } catch (error) {
        console.error('Error fetching weather data:', error);
      }
    };

    onMounted(() => {
      fetchWeather();
    });

    return {
      weatherData,
      router,
    };
  },
};
</script>

<style lang="scss" scoped>
.weather-view {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh; /* Use vh to cover the full viewport height */
  // background-image: url('/path/to/your/background.jpg'); /* Placeholder for background image */
  background-size: cover;
  background-color: #b3e5fc; /* Slightly darker light blue */
  color: #333; /* Darken text color for better contrast */
  overflow: auto; /* Add scroll if content exceeds viewport height */

  .weather-header-buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
  }

  .weather-header {
    text-align: center;
    margin-bottom: 40px; /* Increased margin */

    .location {
      font-size: 28px; /* Larger font */
      margin-bottom: 5px;
    }

    .temperature {
      font-size: 96px; /* Much larger font */
      font-weight: normal; /* Normal weight like in image */
      color: #007bff; /* Use a distinct blue for temperature */
      margin-bottom: 5px;
    }

    .temp-range,
    .weather-type {
      font-size: 16px; /* Slightly smaller */
      margin-top: 5px;
      color: #555; /* Darker grey for range and type */
    }
    .weather-type {
      margin-top: 10px; /* More space below temp range */
    }
  }

  .aqi {
    background-color: rgba(0, 123, 255, 0.3); /* Semi-transparent blue background */
    padding: 15px 20px; /* Added horizontal padding */
    border-radius: 10px;
    margin: 0 20px 30px; /* Added horizontal margin */
    text-align: center;
    backdrop-filter: blur(5px); /* Optional: Add blur effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari */

    .aqi-value {
      font-size: 20px;
      font-weight: bold;
      color: #fff; /* White for AQI value */
      margin-bottom: 5px; /* Space below value */
    }

    .aqi-text {
      font-size: 14px;
      color: #eee; /* Lighter grey for AQI text */
    }
  }

  .forecast {
    display: flex;
    justify-content: start; /* Align items to the start */
    overflow-x: auto;
    padding: 0 20px; /* Added horizontal padding for scroll */
    margin-bottom: 20px; /* Margin below forecast */

    &::-webkit-scrollbar {
      display: none; /* Hide scrollbar for better look */
    }
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    .forecast-item {
      flex: 0 0 80px; /* Fixed width for each item */
      text-align: center;
      margin-right: 15px; /* Space between items */

      .time {
        font-size: 14px;
        margin-bottom: 10px; /* More space below time */
      }

      .icon {
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.5); /* More opaque semi-transparent white */
        margin: 0 auto 10px; /* Center and space below */
        border-radius: 50%;
        display: flex; /* Center content inside */
        align-items: center;
        justify-content: center;
        font-size: 12px; /* Smaller text for type */
      }

      .probability,
      .temp {
        font-size: 14px;
        margin-bottom: 5px; /* Space between probability and temp */
        color: #333; /* Darken text color */
      }
      .temp {
        font-weight: bold; /* Make temp stand out */
        color: #007bff; /* Use blue for temperature */
      }
    }
  }
}
</style> 